<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>绑定样式</title>
    <!--引入Vue-->
    <script type="text/javascript" src="./js/vue.js"></script>
</head>

<body>



    <div id="root">

        <button @click="addSex">添加一个性别属性，默认值是男</button>

        <span>姓名:{{student.name}}</span>
        <span>年龄：{{student.age.rage}}</span>
        <!--v-if判断student.sex下面有sex自己展示，没有不展示-->
        <span v-if="student.sex">性别:{{student.sex}}</span>


        <ul>
            <li v-for="(item,index) in student.friend" :key="index">
                {{item.name}}--{{item.age}}
            </li>
        </ul>


    </div>

    <script>
        //用计算属性实现
        const vm = new Vue({
            el: '#root',
            data: {
                student: {
                    name: "邓紫棋",
                    age: {
                        rage: 31,
                        sAge: 29,
                    },
                    friend: [

                        {
                            name: 'jerry',
                            age: 35
                        }, {
                            name: 'tony',
                            age: 36
                        }

                    ]

                }

            },
            methods: {

                addSex() {
                    // Vue.set()或vm.$set（）用于添加data中没有的对象属性名和属性值。
                    //vue.set(target,key,val)//当前元素，追加的属性名，属性值
                    //但是对象不能是vue实例或者Vue实例的根数据对象(data)，
                    //Vue.set(this, 'sex', '男')报错，
                    //必须添加的属性值属于data下面的某一个对象，用Vue.set（）或vm.$set()都可以
                    // Vue.set(this.student, 'sex', '男')
                    this.$set(this.student, 'sex', '男') //为data中的student添加属性

                    //删除一个属性 this.$delete

                }


            },
        })

        console.log(vm)
    </script>
    <style>

    </style>
</body>

</html>